<template>
	<view class="box1 indexBox">
		<!-- 全局状态栏高度 -->
		<view class="status_bar"></view>
		<view class="u-flex u-flex-col ">
			<view class="w1 u-flex u-row-between p">
				<!-- 搜索歌曲、歌手、专辑 -->
				<!-- <text class="u-font-xl fontColor fontbord">推荐</text> -->
				<view class="cu-bar  bg-white">
					<view class="action sub-title">
						<text class="text-xl text-bold color">推荐</text>
						<text class="bg-color" style="width:2rem"></text>
						<!-- last-child选择器-->
					</view>
				</view>
				<u-icon class="p" name="../../static/img/index_discern.png"size="46"></u-icon>
			</view>
		</view>
		<view class="u-flex u-flex-col ">
			<view class="w9">
				<!-- 搜索歌曲、歌手、专辑 -->
				<u-search placeholder="搜索你想找的音乐" :show-action="false" disabled></u-search>
			</view>
		</view>
		<Banner :banner="indexbanner" class="p"></Banner>
 
		<view>
			<u-grid :col="3" :border="false">
				<u-grid-item>
					<u-icon name="calendar-fill" :size="50" color="#4058D1"></u-icon>
					<view class="grid-text fontColor indexMenu_title u-font-sm">每日推荐</view>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search: '',
				indexbanner: []
			}
		},
		onLoad() {
			//获取首页轮播图数据
			this.req.indexBanner(0).then(e => {
				console.log(e);
				this.indexbanner = e.banners
			})
			//获取每日推荐歌曲
			this.req.getMusic().then(e => {
				console.log(e);
			})
		},
		methods: {

		}
	}
</script>

<style>
	.indexBox {
		background-color: #FFFFFF;
	}
	.indexMenu_title{
		font-weight: 600;
	}
	
</style>
